/**登陆页面 */
import React, { FC } from 'react';
import { Form, Input, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { history } from 'umi';

import { loginImg } from '@/img/imgList';
import { loginApi } from '@/api/login';
import { loginUrl } from '@/urls/url';
import { encrypt } from '@/utils/crypto';
import { setToken } from '@/utils/status';
import styles from './index.less';

const App: FC = () => {
  const [form] = Form.useForm();
  const submit = async () => {
    const values = await form.validateFields();
    const obj = { ...values, userPwd: encrypt(values.userPwd) };
    const { data } = await loginApi(loginUrl, obj);

    if (data.message === '操作成功') {
      setToken(data.data);
      history.push('/');
      message.success(data.message);
    } else {
      message.error(data.message);
    }
  };
  return (
    <div className={styles['login-content']}>
      <img src={loginImg} alt="图片无法显示" />
      <div className={styles['login-form-style']}>
        <div className={styles['login-form-name']}>秦学后台管理</div>
        <Form
          name="basic"
          form={form}
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ userAccount: '18979307261', userPwd: 'zhhdzs129' }}
          autoComplete="off"
        >
          <Form.Item
            name="userAccount"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input
              placeholder="请输入账号"
              prefix={<UserOutlined />}
              style={{ width: 320 }}
            />
          </Form.Item>

          <Form.Item
            name="userPwd"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input.Password
              placeholder="请输入登录密码"
              prefix={<LockOutlined />}
              style={{ width: 320 }}
            />
          </Form.Item>

          <Form.Item>
            <button className={styles['login-form-btn']} onClick={submit}>
              登录
            </button>
          </Form.Item>
        </Form>
        <div className={styles['login-form-tips']}>
          使用手机小程序提示的账号密码登录
        </div>
      </div>
    </div>
  );
};
export default App;
